<template>
  <div class="evaluation-wrap">
    <div class="evaluation-wrap-header">
      <el-button
        text
        bg
        @click="activeName = 'role'"
        :type="activeName === 'role' ? 'primary' : 'default'"
        size="default"
      >
        <el-icon>
          <TablerFidgetSpinner />
        </el-icon>
        {{ $t("form.evaluation.roleWeight") }}
      </el-button>
      <el-button
        text
        bg
        @click="activeName = 'appraise'"
        :type="activeName === 'appraise' ? 'primary' : 'default'"
        size="default"
      >
        <el-icon>
          <TablerFriends />
        </el-icon>
        {{ $t("form.evaluation.evaluationRelationship") }}
      </el-button>
    </div>
    <el-scrollbar
      style="height: calc(100vh - 140px)"
      class="scrollbar-wrap"
    >
      <el-config-provider size="default">
        <div v-show="activeName === 'role'">
          <div class="card-wrap">
            <div class="title">{{ $t("form.evaluation.evaluationRole") }}</div>
            <Role />
          </div>
          <div class="card-wrap">
            <div class="title">{{ $t("form.evaluation.weightGroup") }}</div>
            <weightGroup />
          </div>
        </div>
        <div v-show="activeName === 'appraise'">
          <div class="card-wrap">
            <div class="title">{{ $t("form.evaluation.evaluate") }}</div>
            <Appraise @refresh="handleRefreshReviewer" />
          </div>
          <div class="card-wrap">
            <div class="title">{{ $t("form.evaluation.evaluator") }}</div>
            <Reviewer ref="reviewerRef" />
          </div>
        </div>
      </el-config-provider>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TablerFriends from "~icons/tabler/friends";
import TablerFidgetSpinner from "~icons/tabler/fidget-spinner";
import Role from "@/views/form/evaluation/role.vue";
import WeightGroup from "@/views/form/evaluation/weightGroup.vue";
import Appraise from "@/views/form/evaluation/appraise.vue";
import Reviewer from "@/views/form/evaluation/reviewer.vue";

const activeName = ref("role");

const reviewerRef = ref(null);

const handleRefreshReviewer = () => {
  reviewerRef.value?.getList();
};
</script>

<style scoped lang="scss">
.evaluation-wrap {
  background: #fff;

  &-header {
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e4e7ed;
  }
}

.card-wrap {
  padding: 10px;
  width: 99%;
  margin: 10px auto;

  .title {
    padding-left: 20px;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 5px;
  }
}

.scrollbar-wrap {
  background-color: var(--el-bg-color-page);
}
</style>
